<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="referrer" content="never"> 
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../css/utils/mui.min.css" />
	<title>个人收益</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
			background-color: #fff;
		}
		.head-info {
			padding: 20px 15px;
		}
		.head-info .mui-pull-left {
			width: 60px;
			height: 60px;
			margin-right: 13px;
			border-radius: 50%;
		}
		.name-time {
			display: flex;
			justify-content: space-between;
			color: #333;
		}
		.member-date {
			font-size: 12px;
		}
		.member-date img {
			width: 15px;
			vertical-align: middle;
		}
		.total-income {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
		}
		.income-prompt {
			color: #999999;
			font-size: 12px;
		}
		.income-price {
			display: inline-block;
			font-size: 14px;
			text-align: right;
			color: #de782a;
		}
		/*.mui-control-content {
			min-height: 426px;
		}*/
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			border: 1px solid #F3F3F3;
			color: #999;
			font-size: 14px;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			background-color: #f3f3f3;
			color: #0a0a0a;
		}
		.mui-table-view .mui-media-object {
			border-radius: 50%;
			line-height: 40px;
		    max-width: 40px;
		    height: 40px;
		}
		.mui-table-view .mui-media-body {
			display: flex;
			justify-content: space-between;
		}
		.income-user .user-name {
			color: #333;
		}
		.income-user .user-time {
			font-size: 12px;
			color: #999999;
		}
		.income-amount {
			color: #ff492b;
		    line-height: 42px;
		}
		.mui-fullscreen {
			top: 103px;
			height: auto;
		}
		.mui-pull-top-tips {
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			z-index: 1;
		}
		.mui-bar~.mui-pull-top-tips {
			top: 24px;
		}
		.mui-pull-top-wrapper {
			width: 42px;
			height: 42px;
			display: block;
			text-align: center;
			background-color: #efeff4;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			box-shadow: 0 4px 10px #bbb;
			overflow: hidden;
		}
		.mui-pull-top-tips.mui-transitioning {
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		.mui-pull-top-tips .mui-pull-loading {
			/*-webkit-backface-visibility: hidden;
			-webkit-transition-duration: 400ms;
			transition-duration: 400ms;*/
			
			margin: 0;
		}
		.mui-pull-top-wrapper .mui-icon,
		.mui-pull-top-wrapper .mui-spinner {
			margin-top: 7px;
		}
		.mui-pull-top-wrapper .mui-icon.mui-reverse {
			/*-webkit-transform: rotate(180deg) translateZ(0);*/
		}
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
		}
		.mui-pull-top-canvas {
			overflow: hidden;
			background-color: #fafafa;
			border-radius: 40px;
			box-shadow: 0 4px 10px #bbb;
			width: 40px;
			height: 40px;
			margin: 0 auto;
		}
		.mui-pull-top-canvas canvas {
			width: 40px;
		}
		.mui-slider-indicator.mui-segmented-control {
			background-color: #efeff4;
		}
		
		.mui-bar-tab .mui-tab-item.mui-active {
			color: #FA1F35;
		}
		.mui-bar-tab .mui-tab-item {
			color: #BCBCBC;
		}
		.goods-tab {
			background: url(../../img/phone/mall-no.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .goods-tab {
			background: url(../../img/phone/mall-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.order-tab {
			background: url(../../img/phone/mall-order.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .order-tab {
			background: url(../../img/phone/mall-order-active.png) no-repeat;
			background-size: 100% 100%;
		}
		.income-tab {
			background: url(../../img/phone/mall-income.png) no-repeat;
			background-size: 100% 100%;
		}
		.mui-tab-item.mui-active .income-tab {
			background: url(../../img/phone/mall-income-active.png) no-repeat;
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" id="toGoodsList" href="#">
			<span class="mui-icon goods-tab"></span>
			<span class="mui-tab-label">商品</span>
		</a>
		<a class="mui-tab-item" id="toOrder" href="#">
			<span class="mui-icon order-tab"></span>
			<span class="mui-tab-label">订单</span>
		</a>
		<a class="mui-tab-item mui-active" href="#">
			<span class="mui-icon income-tab"></span>
			<span class="mui-tab-label">收益</span>
		</a>
	</nav>
	<div class="content">
		<div class="head-info">
			<img class="mui-pull-left" id="weChatHeadImg" src="../../img/phone/zhaixiaou-logo.png" />
			<div class="mui-media-body">
				<div class="name-time"><span class="wachat-name"></span><span class="member-date"><img src="../../img/phone/member.png" /> 您已成为会员<span id="dateMember">0</span>天啦！</span></div>
				<div class="total-income"><span class="income-prompt">累计收益（元）</span><span class="income-price">¥0</span></div>
			</div>
		</div>
		<div id="slider" class="mui-slider mui-fullscreen">
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#item1mobile">
					一级收益
				</a>
				<a class="mui-control-item" href="#item2mobile">
					二级收益
				</a>
				<a class="mui-control-item" href="#item3mobile">
					三级收益
				</a>
			</div>
			<!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>-->
			<div class="mui-slider-group">
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					<div id="scroll1" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<!--<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">
										<img class="mui-media-object mui-pull-left" src="../../img/test-back.jpg">
										<div class="mui-media-body">
											<div class="income-user">
												<div class="user-name">伍祖清</div>
												<div class="user-time">2018-11-19 16:21:00</div>
											</div>
											<div class="income-amount">+10.00</div>
										</div>
									</a>
								</li>-->
							</ul>
						</div>
					</div>	
				</div>
				<div id="item2mobile" class="mui-slider-item mui-control-content">
					<div id="scroll2" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								
							</ul>	
						</div>
					</div>
				</div>
				<div id="item3mobile" class="mui-slider-item mui-control-content">
					<div id="scroll3" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</div>	
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../../js/utils/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		mui.init();
		var customerID = base.getParameter("customerID");
		var self = null;
		var itemPageNo = new Array(1,0,0);
		var itemIndex = 0;
		$(function(){
			base.postData(base.url.incomeLogList, {customerID:customerID,level:1,pageNo:1}, function(data){
				if (data.success) {
					initIncome(data.context);
				}
			});
		});	
		function initIncome(data){
			$(".wachat-name").text(data.customer.nickName);
			$("#weChatHeadImg").attr("src", data.customer.headImgUrl);
			$("#dateMember").html(data.date);
			$(".income-price").html("¥"+(data.customer.totalIncome/100).toFixed(2));
			var html = "";
			for (var i=0;i<data.list.length;i++) {
				html += pinIncome(data.list[i]);
			}
			$("#item1mobile .mui-table-view").html(html);
		}
		document.getElementById('slider').addEventListener('slide', function(e) {
			if(e.detail.slideNumber === 0){
				itemIndex = 0;
			}else if (e.detail.slideNumber === 1) {
				itemIndex = 1;
				if (itemPageNo[itemIndex] == 0) {
					pullUp();					
				}
			} else if (e.detail.slideNumber === 2) {
				itemIndex = 2;
				if (itemPageNo[itemIndex] == 0) {
					pullUp();					
				}
			}
		});
		(function($) {
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			$.ready(function() {
				//循环初始化所有下拉刷新，上拉加载。
				$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					$(pullRefreshEl).pullToRefresh({
						up: {
							callback: function() {
								self = this;
								setTimeout(function() {
									pullUp();
									self.endPullUpToRefresh();
								}, 1000);
							}
						}
					});
				});
			});
		})(mui);
		
		function pullUp(){
			itemPageNo[itemIndex]++
			base.postData(base.url.incomeLogList, {customerID:customerID,level:itemIndex+1,pageNo:itemPageNo[itemIndex]}, callbackIncomeLogList);
		}
		function callbackIncomeLogList(data){
			if (data.success) {
				var html = "";
				for (var i=0;i<data.context.list.length;i++) {
					html += pinIncome(data.context.list[i]);
				}
				$("#item"+(itemIndex+1)+"mobile .mui-table-view").append(html);
				if (self != null) {
					var endFresh = false;
					if (data.context.list.length <= 0) {
						endFresh = true;
					}
					self.endPullUpToRefresh(endFresh);
				}
			}
		}
		function pinIncome(data) {
			var html = '<li class="mui-table-view-cell mui-media">'+
						'	<a href="javascript:;">'+
						'		<img class="mui-media-object mui-pull-left" src="'+data.headImgUrl+'">'+
						'		<div class="mui-media-body">'+
						'			<div class="income-user">'+
						'				<div class="user-name">'+data.nickName+'</div>'+
						'				<div class="user-time">'+data.createTime+'</div>'+
						'			</div>'+
						'			<div class="income-amount">+'+(data.price/100)+'</div>'+
						'		</div>'+
						'	</a>'+
						'</li>';
			return html;			
		}
		
		$("#toGoodsList").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/shoppingMall.html?customerID='+customerID;
		});
		$("#toOrder").on('tap', function(){
			window.location.href=server_root+'/admin_mw/pages/phone/goodsOrder.html?customerID='+customerID;
		});
	</script>	
</body>
</html>
